/**
 *
 * @author zzhijie
 * @date 2021-02-07
 */
import {toCapitalize} from 'js-utils';
import mixin from '../mixins/mixin';
import {getResult} from '../../utils';

export default {
  name: 'f-form',
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    },
    scopeName: {
      type: String,
      default: ''
    },
    validFlag: {
      type: Boolean,
      default: true
    },
    event: {
      type: String,
      default: ''
    },
    inline: Boolean,
    disabled: Boolean,
    append: {
      type: Function
    }
  },
  mixins: [mixin],
  data() {
    return {};
  },
  methods: {
    /**
     * 获取组件禁用状态
     * @param column
     * @return {boolean}
     */
    isDisabled(column) {
      if (this.disabled) return true;
      let {disabledInAdd = false, disabledInEdit = false, disabledInView = true} = column;
      switch (this.event) {
        case 'add':
          return disabledInAdd;
        case 'edit':
          return disabledInEdit;
        case 'view':
          return disabledInView;
        default:
          return false;
      }
    },
    /**
     * 创建弹出层表单项
     */
    createFormItem(column) {
      let scope = this.scopeName ? (column[this.scopeName] || {}) : column;
      let {extend, hide, $formItem = {}} = scope;
      let {props = {}, attrs = {}} = $formItem;
      if (!column || getResult(hide, scope)) {
        return null;
      } else {
        let disabled = this.isDisabled(column);
        let el = this.renderEl(column, scope, this.data, toCapitalize(this.scopeName), null, disabled);
        return (
          <el-form-item
            prop={column.field}
            label={column.label}
            props={props}
            attrs={attrs}>
            {extend ? extend(el, this.data) : el}
          </el-form-item>
        );
      }
    }
  },
  render() {
    let {columns = [], rules = {}} = this.config;
    let scope = this.scopeName ? (this.config[this.scopeName] || {}) : this.config;
    let {$form = {}, group = [], sortList = []} = scope;
    let {props = {}, attrs = {}} = $form;
    let columnList;
    if (group.length) {
      columnList = group.map(item => {
        let {title, columnIndexList = []} = item;
        return (
          <div class="group-item">
            {title && <div class="group-item-title">{title}</div>}
            {columnIndexList.map(index => {
              let column = columns[index];
              if (!column) return null;
              let scope = this.scopeName ? (column[this.scopeName] || {}) : column;
              let {span, hide} = scope;
              if (getResult(hide, scope)) return null;
              return (
                <el-col span={span}>
                  {this.createFormItem(column)}
                </el-col>
              );
            })}
          </div>
        );
      });
    } else if (sortList.length) {
      columnList = sortList.map(field => {
        let column = columns.find(v => v.field === field);
        return column ? this.createFormItem(column) : null;
      });
    } else {
      columnList = columns.map(column => {
        return this.createFormItem(column);
      });
    }
    return (
      <el-form
        nativeOnSubmit={e => e.preventDefault()}
        label-width="80px"
        props={{
          inline: this.inline,
          model: this.data,
          ...props
        }}
        attrs={attrs}
        rules={this.validFlag ? rules : null}
        ref="form">
        {columnList}
        {this.append && this.append()}
      </el-form>
    );
  }
};
